<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星型绘制菱形图案</title>
    <style>
        body {
            /* 设置字体 */
            font-family: 'Courier New', Courier, monospace; 
            /* 字体大小 */
            font-size: 30px;
        }
        .container {
            /* 宽度设置为内容最大宽度 */
            width: max-content;
            /* 居中 */
            margin: 0 auto;
            background-color: rgb(243,255,175);
            /* 上内边距:20px  下内边距:20px  左内边距:100px  右内边距:100px */
            padding: 20px 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <script>
            document.write('','<font color="blue">') //设置绘制上三角的颜色为蓝色
                for(var i=0;i<5;i++){  //循环行数
                    for(var j=i;j<5;j++){  //循环输出空格
                        document.write("&nbsp");
                    }
                    for(var k=0;k<2*i+1;k++){//循环输出星型
                        document.write("*");
                    }
                    document.write("<br>")//换行
                }
            document.write('','<font color="red">') //设置绘制上三角的颜色为红色
                for(var i=5;i>0;i--){//循环行数
                    for(var j=i-1;j<5;j++){//循环输出空格
                        document.write("&nbsp");
                    }
                    for(var k=0;k<2*i-1;k++){//循环输出星型
                        document.write("*");
                    }
                    document.write("<br>")//换行
                }
        </script>
    </div>
</body>
</html>